<template>
  <view class="AccountData">
    <view class="headImg">
      <up-avatar
        size="100%"
        :src="`${env.VITE_OSS_BUCKET}${userInfo.profileImageUrl}`"
      ></up-avatar>
    </view>
    <view class="name">
      <view class="accountName u-line-1">{{ userInfo.userName }}</view>
      <view v-if="userInfo.wechatId" class="wechartNumber">
        微信号：{{ userInfo.wechatId }}
      </view>
    </view>
    <view class="edit" @click="handlerEdit">
      <up-icon name="edit-pen-fill" color="#43AFF2" size="32rpx"></up-icon>
      <view>编辑资料</view>
    </view>
  </view>
</template>

<script setup>
import useUserInfo from "@/hooks/useUserInfo.js";

import useRouter from "@/hooks/useRouter.js";

const { userInfo } = useUserInfo();
const { navigateTo } = useRouter();

const handlerEdit = () => {
  navigateTo({
    url: "/pages/my/edit",
  });
};
</script>

<style lang="scss">
.AccountData {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100rpx;
}

.headImg {
  width: 100rpx;
  height: 100rpx;
  margin-right: 18rpx;
}

.name {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  flex: 1;

  .wechartNumber {
    font-size: 22rpx;
    font-weight: 400;
    display: flex;
    align-items: center;
  }
}

.edit {
  width: 145rpx;
  height: 38rpx;
  margin-left: 8rpx;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 20rpx;
  color: #43aff2;
  font-size: 22rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
